<template>
  <div id="usending">
    <el-form
      :model="numberValidateForm"
      ref="numberValidateForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <h3>寄件人消息</h3>
      <el-form-item
        label="联系电话"
        prop="sender"
        :rules="[
          { required: true, message: '手机号不能为空' },
          { type: 'number', message: '年龄必须为数字值' },
        ]"
      >
        <el-input
          type="sender"
          v-model.number="numberValidateForm.sender"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="寄件人姓名"
        prop="senderName"
        :rules="[{ required: true, message: '姓名不能为空' }]"
      >
        <el-input
          type="senderName"
          v-model.number="numberValidateForm.senderName"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="寄件人地区" :required="true">
        <el-input
          @focus="dialogVisible = true"
          type="senderArea"
          v-model.number="numberValidateForm.senderArea"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="寄件人详细地址"
        prop="senderAddress"
        :rules="[{ required: true, message: '地址不能为空' }]"
      >
        <el-input
          @focus="dialogVisible = true"
          type="senderAddress"
          v-model.number="numberValidateForm.senderAddress"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <h3>收件人消息</h3>
      <el-form-item
        label="联系电话"
        prop="recipient"
        :rules="[
          { required: true, message: '手机号不能为空' },
          { type: 'number', message: '手机号必须为数字值' },
        ]"
      >
        <el-input
          type="recipient"
          v-model.number="numberValidateForm.recipient"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="收件人姓名"
        prop="recipientName"
        :rules="[{ required: true, message: '姓名不能为空' }]"
      >
        <el-input
          type="recipientName"
          v-model.number="numberValidateForm.recipientName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="收件人地区" :required="true">
        <el-input
          @focus="dialogVisible1 = true"
          type="recipientArea"
          v-model.number="numberValidateForm.recipientArea"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="收件人地址"
        prop="recipientAddress"
        :rules="[{ required: true, message: '地址不能为空' }]"
      >
        <el-input
          @focus="dialogVisible1 = true"
          type="recipientAddress"
          v-model.number="numberValidateForm.recipientAddress"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <h3>物流公司</h3>
      <el-form-item label="物流公司" :required="true">
        <el-select
          v-model="numberValidateForm.logisticsCompany"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="PlaceOrders">生成订单</el-button>
    </el-form>
    <el-dialog title="定位" :visible.sync="dialogVisible" width="50%">
      <dialog-map @addresschange="addresschange" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="定位" :visible.sync="dialogVisible1" width="50%">
      <dialog-map @addresschange="addresschange1" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { PlaceOrder } from "@/request/api";
import { PersonInfoAPI } from "@/request/api";
import DialogMap from "./DialogMap.vue";
export default {
  components: { DialogMap },
  inject: ["reload"],
  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      numberValidateForm: {
        sender: "",
        senderName: "",
        senderAddress: "",
        recipient: "",
        recipientName: "",
        recipientAddress: "",
        logisticsCompany: "",
        senderArea: "",
        recipientArea: "",
        sendLng:"",
        sendLat:"",
        recipientLng:"",
        recipientLat:""
      },
      options: [],
      options1: [
        {
          value: "顺丰",
          label: "顺丰",
        },
        {
          value: "京东",
          label: "京东",
        },
        {
          value: "圆通",
          label: "圆通",
        },
        {
          value: "邮政",
          label: "邮政",
        },
      ],
    };
  },
  methods: {
    addresschange(value1, value2,value3,value4) {
      this.numberValidateForm.senderAddress = value1;
      this.numberValidateForm.senderArea = value2;
      this.numberValidateForm.sendLng=value3
      this.numberValidateForm.sendLat=value4
      console.log(this.numberValidateForm.senderArea);
    },
    addresschange1(value1, value2,value3,value4) {
      this.numberValidateForm.recipientAddress = value1;
      this.numberValidateForm.recipientArea = value2;
      this.numberValidateForm.recipientLng=value3
      this.numberValidateForm.recipientLat=value4
      console.log(this.numberValidateForm.recipientArea);
    },
    PlaceOrders() {
      PlaceOrder(this.numberValidateForm).then(() => {
        this.$message({
          type: "success",
          message: "成功下单",
        });
        this.reload();
      });
      this.$router.push({
        path: "/viewlogistics",
      });
    },
  },
  created() {
    PersonInfoAPI().then((res) => {
      console.log(res.data.data);
      this.numberValidateForm.sender = Number(res.data.data.account);
      this.numberValidateForm.senderName = res.data.data.name;
      this.numberValidateForm.senderAddress = res.data.data.address;
      this.numberValidateForm.senderArea=res.data.data.area
      this.numberValidateForm.sendLng=res.data.data.lng
      this.numberValidateForm.sendLat=res.data.data.lat
    });
  },
};
</script>
<style>
#usending {
  max-width: 60%;
  margin: 0 auto;
}
#fcascader {
  position: absolute;
  left: 0%;
}
</style>